<template>
  <view class="">
    <svg aria-hidden="true">
      <use :href="symbolId" :fill="color" :font-size="size"></use>
    </svg>
  </view>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
const props = defineProps({
  prefix: {
    type: String,
    default: 'iconfont',
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: [String],
    default: 'orange',
  },
  size: {
    type: [Number],
    default: 20,
  },
})

const symbolId = computed(() => {
  return `#${props.prefix}-${props.name}`
})
</script>

<style lang="scss"></style>
